<template>
  <div class="container mainCon">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      class="tabs"
    >
      <el-tab-pane label="专户列表" name="first">
        <specialAccountList v-if="isShowFirst"></specialAccountList>
      </el-tab-pane>
      <el-tab-pane label="拨付计划" name="second" v-if="!isHefeng">
        <allocationPlanList
          v-if="isShowSecond"
          :message="message"
        ></allocationPlanList>
      </el-tab-pane>
    </el-tabs>
    <span class="notice" v-if="isShowSecond"
      >可查看属于本企业所有项目的工资专户的详细资金拨付情况，掌握资金拨付周期，及时足额拨付专户款项。</span
    >
    <!-- <span class="notice" v-if="isShowSecond && !loginQy">查看该项目工资专户的详细资金拨付情况，掌握资金拨付周期，督促企业及时足额拨付专户款项。</span>
    <span
      class="notice"
      v-if="isShowSecond && loginQy"
    >查看隶属于本企业所有项目的工资专户的详细资金拨付情况，掌握资金拨付周期，及时足额拨付专户款项。</span>-->
  </div>
</template>

<script>
/*{{}}*/
import specialAccountList from './specialAccountList'
import allocationPlanList from './allocationPlanList'

export default {
  name: 'specialAccount',
  components: {
    specialAccountList,
    allocationPlanList,
  },
  beforeRouteEnter: (to, from, next) => {
    if (from.path === '/home/separateAccountManagement/setAllocationPlan') {
      next((vm) => {
        vm.isShowSecond = true
        vm.isShowFirst = false
        vm.activeName = 'second'
      })
    } else {
      next()
    }
  },
  data() {
    return {
      activeName: 'first',
      isShowFirst: true,
      isShowSecond: false,
      loginQy: false,
      message: 'specialAccount',
    }
  },
  created() {
    if (
      localStorage.getItem('loginType') === 'QY' ||
      localStorage.getItem('loginType') === 'XM'
    ) {
      this.loginQy = true
    }
  },
  computed: {
    isHefeng() {
      return this.$store.state.isHefeng
    },
  },
  methods: {
    //tabs栏切换
    handleClick(tab, event) {
      if (tab.label == '专户列表') {
        this.isShowFirst = true
        this.isShowSecond = false
      } else if (tab.label == '拨付计划') {
        this.isShowSecond = true
        this.isShowFirst = false
      }
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 130px;
  padding: 0;
}
// tab栏切换
.tabs {
  /deep/ .el-tabs__content {
    background: #fff;
    min-height: 800px;
    padding: 24px;
  }
  /deep/ .el-tabs__header {
    margin: 0;
  }
  /deep/ .el-tabs__nav-scroll {
    overflow: hidden;
    background: #e4ebf1;
    /* margin-top: 10px; */
    padding-top: 15px;
  }
  /deep/ .el-tabs__item.is-active {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    background: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  /deep/ .el-tabs__item {
    color: #333;
    background: #d5e0e9;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  /deep/ .el-tabs__item:first-child {
    margin: 0 4px 1px 24px;
  }
  /deep/ .el-tabs__item {
    margin-right: 4px;
  }
  /deep/ .el-tabs__item:last-child {
    margin-right: 0;
  }
}

.notice {
  position: absolute;
  top: 27px;
  left: 235px;
  font-size: 14px;
  color: #666666;
}
</style>
